<template>
  <div id="container" class="w-full h-full" style="height: calc(100% - 100px)"></div>
</template>

<script lang="ts">
import { Graph } from '@antv/x6';
import dn from '@/assets/image/petrochemicalDiagram/dn-icon.png'
import gf from '@/assets/image/petrochemicalDiagram/gf-icon.png'
import hd from '@/assets/image/petrochemicalDiagram/hd-icon.png'
import hgqy from '@/assets/image/petrochemicalDiagram/hgqy-icon.png'
import md from '@/assets/image/petrochemicalDiagram/md-icon.png'
import rq from '@/assets/image/petrochemicalDiagram/rq-icon.png'
import sd from '@/assets/image/petrochemicalDiagram/sd-icon.png'
import zq from '@/assets/image/petrochemicalDiagram/zq-icon.png'

export default {
  mounted() {
    const data = {
      nodes: [
        { id: 'ny1', label: { text: '光伏', x: 0, y: 45 }, img: gf, width: 60, height: 60, x: 100, y: 100 },
        { id: 'ny2', label: { text: '核电', x: 0, y: 45 }, img: hd, width: 60, height: 60, x: 100, y: 200 },
        { id: 'ny3', label: { text: '煤炭', x: 0, y: 45 }, img: md, width: 60, height: 60, x: 100, y: 300 },
        { id: 'ny4', label: { text: '工业水', x: 0, y: 45 }, img: sd, width: 60, height: 60, x: 100, y: 400 },
        { id: 'ny5', label: { text: '燃气', x: 0, y: 45 }, img: rq, width: 60, height: 60, x: 100, y: 500 },

        { id: 'lx1', label: { text: '电能', x: 0, y: 45 }, img: dn, width: 60, height: 60, x: 550, y: 250 },
        { id: 'lx2', label: { text: '蒸汽', x: 0, y: 45 }, img: zq, width: 60, height: 60, x: 550, y: 400 },

        { id: 'cq1', label: { text: '卫星化工', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 50 },
        { id: 'cq2', label: { text: '盛奥化学', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 130 },
        { id: 'cq3', label: { text: '嘉宏化学', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 210 },
        { id: 'cq4', label: { text: '盛虹炼化', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 290 },
        { id: 'cq5', label: { text: '斯尔邦石化', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 370 },
        { id: 'cq6', label: { text: '赛科化学', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 450 },
        { id: 'cq7', label: { text: '瑞一化工', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 530 },
        { id: 'cq8', label: { text: '思派', x: 70, y: 0 }, img: hgqy, width: 50, height: 50, x: 1000, y: 610 },
      ],
      edges: [
        //第一排到第二排连接
        { source: 'ny1', target: 'lx1', color: "#3699FF", strokeWidth: 30, vertices: [{ x: 300, y: 150 },{ x: 400, y: 200 }]},
        { source: 'ny2', target: 'lx1', color: "#6c928c", strokeWidth: 23, vertices: [{ x: 300, y: 250 },{ x: 400, y: 250 }]},
        { source: 'ny3', target: 'lx1', color: "#333", strokeWidth: 10, vertices: [{ x: 300, y: 350 },{ x: 400, y: 300 }]},
        
        { source: 'ny3', target: 'lx2', color: "#333", strokeWidth: 23, vertices: [{ x: 300, y: 350 },{ x: 400, y: 400 }]},
        { source: 'ny4', target: 'lx2', color: "#4682b4", strokeWidth: 25, vertices: [{ x: 300, y: 450 },{ x: 400, y: 420 }]},

        //第一排到第三排连接
        { source: 'ny4', target: 'cq7', color: "#4682b4", strokeWidth: 10, vertices: [{ x: 500, y: 500 },{ x: 700, y: 550 }]},
        { source: 'ny4', target: 'cq8', color: "#4682b4", strokeWidth: 5, vertices: [{ x: 500, y: 550 },{ x: 700, y: 600 }]},

        { source: 'ny5', target: 'cq5', color: "#87ceeb", strokeWidth: 15, vertices: [{ x: 500, y: 530 },{ x: 800, y: 450 }]},
        { source: 'ny5', target: 'cq6', color: "#87ceeb", strokeWidth: 10, vertices: [{ x: 500, y: 580 },{ x: 800, y: 500 }]},
        
        //第二排到第三排连接
        { source: 'lx1', target: 'cq1', color: "#20b2aa", strokeWidth: 10, vertices: [{ x: 750, y: 210 },{ x: 900, y: 100 }]},
        { source: 'lx1', target: 'cq2', color: "#20b2aa", strokeWidth: 5, vertices: [{ x: 750, y: 230 },{ x: 900, y: 200 }]},
        { source: 'lx1', target: 'cq3', color: "#20b2aa", strokeWidth: 10, vertices: [{ x: 750, y: 250 },{ x: 900, y: 250 }]},
        { source: 'lx1', target: 'cq4', color: "#20b2aa", strokeWidth: 15, vertices: [{ x: 750, y: 270 },{ x: 900, y: 300 }]},
        { source: 'lx1', target: 'cq5', color: "#20b2aa", strokeWidth: 5, vertices: [{ x: 750, y: 290 },{ x: 900, y: 350 }]},

        { source: 'lx2', target: 'cq1', color: "#6495ed", strokeWidth: 5, vertices: [{ x: 750, y: 320 },{ x: 900, y: 120 }]},
        { source: 'lx2', target: 'cq2', color: "#6495ed", strokeWidth: 10, vertices: [{ x: 750, y: 350 },{ x: 900, y: 200 }]},
        { source: 'lx2', target: 'cq3', color: "#6495ed", strokeWidth: 15, vertices: [{ x: 750, y: 370 },{ x: 900, y: 270 }]},
        { source: 'lx2', target: 'cq4', color: "#6495ed", strokeWidth: 5, vertices: [{ x: 750, y: 400 },{ x: 900, y: 350 }]},
        { source: 'lx2', target: 'cq5', color: "#6495ed", strokeWidth: 10, vertices: [{ x: 750, y: 430 },{ x: 900, y: 400 }]},
        { source: 'lx2', target: 'cq6', color: "#6495ed", strokeWidth: 10, vertices: [{ x: 750, y: 450 },{ x: 900, y: 450 }]},
      ],
      texts:[
        { text: '5040kwh', color: "#6495ed", x: 50, y: 150 },
        { text: '2306t', color: "#6495ed", x: 50, y: 250 },
        { text: '5800t', color: "#6495ed", x: 50, y: 350 },
        { text: '3706t', color: "#6495ed", x: 50, y: 450 },
        { text: '502t', color: "#6495ed", x: 50, y: 550 },

        { text: '50%', color: "#6495ed", x: 250, y: 100 },
        { text: '60%', color: "#6495ed", x: 250, y: 200 },
        { text: '10%', color: "#6495ed", x: 250, y: 300 },
        { text: '20%', color: "#6495ed", x: 250, y: 500 },

        { text: '100%', color: "#6495ed", x: 650, y: 250 },
        { text: '80%', color: "#6495ed", x: 650, y: 400 },

        { text: '5%', color: "#6495ed", x: 950, y: 100 },
        { text: '10%', color: "#6495ed", x: 950, y: 200 },
        { text: '20%', color: "#6495ed", x: 950, y: 250 },
        { text: '5%', color: "#6495ed", x: 950, y: 350 },
        { text: '10%', color: "#6495ed", x: 950, y: 450 },
        { text: '20%', color: "#6495ed", x: 950, y: 500 },
        { text: '20%', color: "#6495ed", x: 950, y: 550 },
        { text: '20%', color: "#6495ed", x: 950, y: 620 },
      ]
    }

    const graph = new Graph({
      container: document.getElementById('container') as any,
      autoResize: true,
      panning: {
        enabled: true,
        eventTypes: ['leftMouseDown'],
      },
      mousewheel: true,
    })
    //居中加载
    graph.centerPoint(600, 350)
   
    //加载节点
    data.nodes.forEach((e) => {
      graph.addNode({
        id: e.id,
        shape: 'image',
        x: e.x,
        y: e.y,
        width: e.width,
        height: e.height,
        imageUrl: e.img,
        attrs: {
          body: {
            fill: '#fff',
          },
          label: {
            text: e.label.text,
            fill: '#4682b4',
            x: e.label.x,
            y: e.label.y,
            fontSize: 16,
          },
        },
      })
    })
    //加载线
    data.edges.forEach((e) => {
      graph.addEdge({
        source: e.source,
        target: e.target,
        vertices: e.vertices,
        connector: { name: 'smooth'},
        attrs: {
          line: {
            stroke: e.color,
            strokeWidth: e.strokeWidth,
            targetMarker: {
              tagName: 'path',
              d: 'M 20 -10 0 0 20 10 Z',
              strokeWidth: e.strokeWidth*0.6,
            },
          },
        },
      })
    })
    //加载 文本
    data.texts.forEach((e) => {
      graph.addNode({
        x: e.x,
        y: e.y,
        shape: 'text-block',
        text: e.text,
        attrs: {
          body: {
            stroke: '#FFF',
          },
        },
      })
    })
  },
}
</script>

<style scoped>
.g6-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
